<!---
  @author: andy
  @description: 基本布局组件
-->
<template>
  <div class="base-layout">
    <component :is="components[config.app.type]" />
  </div>
</template>
<script lang='ts' setup>
import { storeToRefs } from 'pinia';
import AdminLayout from './AdminLayout.vue';
import NormalLayout from './NormalLayout.vue';
import { useConfigStore } from '@/stores/configs/config';
import { ref, shallowRef, type Component, type ShallowRef } from 'vue';
import type { AppType } from '@/stores/configs/types';
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const components = ref<Record<AppType , ShallowRef<Component>>>({
  admin : shallowRef(AdminLayout),
  normal : shallowRef(NormalLayout)
});
</script>
<style lang='less' scoped>
.base-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .useTheme({
    background-color: page-bg-color;
  })
}
</style>